<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <button id="btn1">开始</button>
    <button id="btn2">停止</button><br>
    <p id="p">100</p>
</body>

</html>
<script>
    var timer;
    //点击开始的按钮
    btn1.onclick = function () {
        // console.log("点我,就开始了");
        /* 
            目的:
                获取p标签上面的文本值(使用innerHTML或者是innerText都行)
                将这个值转换成number类型
                然后这个值--,然后赋值p的标签

                将这些代码都要扔到定时器里面来(setInterval)
        */
        timer = setInterval(function () {
           //获取文本值,并转换成数值类型
            p.innerHTML --
        }, 50)
    }

    //点击结束的按钮
    btn2.onclick = function () {
        // console.log("点我就结束了");
        clearInterval(timer)//他会先在当前作用当中查找,找不到了,就去外部作用当中查找
        timer = null;//释放空间
    }
</script>